In this tutorial we will create a side panel, then we will convert it into a popup. ## Setup Side Panel Create icon files set. You should know how by now. Create manifest.json with these contents: ``` { "manifest_version": 3, "name": "", "version": "1.0", "description": ".", "author": "Weng Fei Fung", "icons": { "16": "icon16x16.png", "32": "icon32x32.png", "48": "icon48x48.png", "128": "icon128x128.png" }, "content_security_policy": { "extension_pages": "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; object-src 'self';" }, "permissions": [ "sidePanel", "scripting", "tabs", "activeTab" ], "action": { "default_icon": "icon.png" }, "background": { "service_worker": "background.js" }, "side_panel": { "default_path": "sidepanel.html" } } ``` Notice we added "sidePanel" as a permission. Otherwise, side panel api would not be available for you to programmatically open the side panel. Based on the manifest.json, we see that this is a function action (NOT a popup action), so no popup.html is needed. We also see that there are two files we need to create: - background.js - sidepanel.html Create `background.js` to detect the user clicking the chrome extension icon (for the function action): ``` console.log("Background script loaded"); // Listen for when the extension icon is clicked chrome.action.onClicked.addListener((tab) => { console.log('Extension icon was clicked'); chrome.sidePanel.open({ windowId: tab.windowId }); }); ``` ^Then background.js opens the sidepanel programmatically. ^Background detects the chrome extension icon is clicked, and is able to provide information on which tab you're on when the chrome extension is clicked. With the tab object, you can extract the window id to open the side panel with (you pass window id into the method that opens the side panel). Create `sidepanel.html`: ``` Some Chrome Extension presentation

Some Chrome Extension presentation

``` Update/install the chrome extension because we will do some preliminary testing next. --- ## Preliminary Testing Click the chrome extension icon. Thinking what happens under the hood: - background.js detects onclick event of the chrome extension icon - background.js then programmatically opens sidepanel (which is sidepanel.html) Visit duckduckgo.com Click the Chrome Extension: ![[Pasted image 20250405032557.png]] You can close the sidepanel by clicking the sidepanel icon that's now active or by clicking the "X" at the top right inside the sidepanel. Clicking the chrome extension icon does not toggle the sidepanel away (the click action is always to open sidepanel) --- ## Convert the side panel into popup 1. Remove `side_panel` entry from manifest.json 2. Expand action so that it gets converted from a functional action (requiring onclick handling at a background.js) into a popup action: ``` "action": { "default_icon": "icon.png", "default_popup": "sidepanel.html" }, ``` 3. Remove `background` entry from manifest.json because is no longer needed. 4. Your final manifest.json could look like this: ``` { "manifest_version": 3, "name": "", "version": "1.0", "description": ".", "author": "Weng Fei Fung", "icons": { "16": "icon16x16.png", "32": "icon32x32.png", "48": "icon48x48.png", "128": "icon128x128.png" }, "content_security_policy": { "extension_pages": "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; object-src 'self';" }, "permissions": [ "sidePanel", "scripting", "tabs", "activeTab" ], "action": { "default_icon": "icon.png", "default_popup": "sidepanel.html" } } ``` You technically don't the file `background.js`, so you can delete it if you choose to. Update Chrome Extension. At duckduckgo.com, click the Chrome extension icon. You'll see similar content but in a popup form instead of the side panel form: ![[Pasted image 20250405033430.png]] The side panel had more area. If you wish the popup to have more padding around it, you have to add css to it. Let's rename sidepanel.html to popup.html, then link popup.html to popup.css. Make sure manifest.json's popup action is pointing to popup.html now. Then at popup.css we add the rules: ``` body { width: 300px; height: fit-content; padding: 30px; } ``` Now looks like this - neat: ![[Pasted image 20250405033815.png]] --- ## Summary This document reinforces that you choose whether it's a popup or a side panel (or an options page, or a DevTools panel, or a DevTools Elements sidebar pane). Choose a type of presentation that makes sense for your feature or user's job.